<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>茄子小说主页</title>
    <script rel="stylesheet" src="/js/jquery.js"></script>
    <script rel="stylesheet" src="/js/modal.js"></script>
    <script rel="stylesheet" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/font/bootstrap-icons.css}">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

</head>
<body>
<div id="maxBox">
    <!--导航栏-->
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <h4 class="navbar-nav mr-auto" style="font-weight: bold;padding-right: 10px;">
                    <a th:href="'/user/index'"><i class="bi bi-book"></i>&nbsp; 茄子小说网</a>
                </h4>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li th:each="types, iterStat : ${typeList}" class="nav-item">
                            <a th:href="'/user/toMain?typeId='+${types.typeId}+'&typeName='+${types.typeName}"
                               th:text="${types.typeName}" target="myIframe" class="nav-link"></a>
                        </li>
                    </ul>

                    <ul class="nav justify-content-end" th:if="${session.user==null}">
                        <li class="nav-item">
                            <a id="loginModel" type="button" class="btn" onclick="loginModelShow()">登录</a>
                        </li>
                        <li class="nav-item"><a class="nav-link">|</a></li>
                        <li class="nav-item">
                            <a type="button" class="btn" onclick="registerModelShow()">注册</a>
                        </li>
                        <li class="nav-item"><a class="nav-link">|</a></li>
                        <li class="nav-item"><a class="nav-link btn" type="button" onclick="toLoginMsg()"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                    </ul>
                    <ul class="nav justify-content-end" th:if="${session.user!=null}">
                        <li class="nav-item">
                            <a class="nav-link" th:text="'欢迎您  '+${session.user.getUsername()}">xx</a>
                        </li>
                        <li class="nav-item"><a class="nav-link">|</a></li>
                        <li class="nav-item"><a class="nav-link" th:href="'/user/toBookRack?userId='+${session.user.getUserId()}"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                        <li class="nav-item"><a class="nav-link">|</a></li>
                        <li class="nav-item"><a class="nav-link" th:href="'/user/exit'">退出</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <!--搜索框-->
    <div class="row">
        <div class="col-md-12" style="height: 200px">
            <form class="form-inline" style="padding-left: 30%;;padding-top: 90px">
                <div class="form-group ">
                    <input type="text" class="form-control" id="inputFictionName" placeholder="修真聊天群"
                           style="width: 500px">
                </div>
                <button id="searchFictionButton" onclick="searchFiction()" type="button" class="btn btn-outline-info">
                    <i class="bi bi-search"></i>
                    搜索
                </button>
            </form>
        </div>
    </div>

    <!--书籍列表展示-->
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <span class="page-header" th:if="${typeName}=='null'">
                        <div class="page-header">
                            <h4>全部作品</h4>
                        </div>
                        <hr/>
                    </span>
                    </span>
                        <span class="page-header" th:if="${typeName}!='null'">
                        <div class="page-header">
                            <h4 th:text="${typeName}">typeName</h4>
                        </div>
                        <hr/>
                    </span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="row" th:each="fictions , iterStat:${fictionList}"
                         th:if="${iterStat.count} &gt; 0 and ${iterStat.count} &lt;= 3" style="margin-bottom: 10px;">
                        <div class="col-md-4" th:if="${session.user == null}">
                            <a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId=null'">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-4" th:if="${session.user != null}">
                            <a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId='+${session.user.getUserId()}">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-8">
                            <div class="row" th:if="${session.user != null}">
                                <div class="col-md-12"><h4><a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId='+${session.user.getUserId()}" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row" th:if="${session.user == null}">
                                <div class="col-md-12"><h4><a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId=null'" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12"><h6
                                        th:text="${#strings.substring(fictions.fictionDescription, 0, 48)}"></h6></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>
                                        <button class="btn btn-default" th:text="${fictions.wordCount}+万" ></button>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">
                    <div class="row" th:each="fictions , iterStat:${fictionList}"
                         th:if="${iterStat.count} &gt; 3 and ${iterStat.count} &lt;= 6" style="margin-bottom: 10px;">
                        <div class="col-md-4">
                            <a href="#">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12"><h4><a href="#" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12"><h6
                                        th:text="${#strings.substring(fictions.fictionDescription, 0, 48)}"></h6></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>
                                        <button class="btn btn-default" th:text="${fictions.wordCount}+万"></button>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row" th:each="fictions , iterStat:${fictionList}"
                         th:if="${iterStat.count} &gt; 6 and ${iterStat.count} &lt;= 9" style="margin-bottom: 10px;">
                        <div class="col-md-4">
                            <a href="#">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12"><h4><a href="#" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12"><h6
                                        th:text="${#strings.substring(fictions.fictionDescription, 0, 48)}"></h6></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>
                                        <button class="btn btn-default" th:text="${fictions.wordCount}+万"></button>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 50px;">
                <div class="col-md-4">
                    <div class="page-header">
                        <h4>热搜榜</h4>
                    </div>
                    <hr/>
                </div>
                <div class="col-md-4">
                    <div class="page-header">
                        <h4>收藏榜</h4>
                    </div>
                    <hr/>
                </div>
                <div class="col-md-4">
                    <div class="page-header">
                        <h4>完本推荐</h4>
                    </div>
                    <hr/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="row" th:each="fictions , iterStat:${searchTopList}"
                         th:if="${iterStat.count} &gt; 0 and ${iterStat.count} &lt;= 4" style="margin-bottom: 10px;">
                        <div class="col-md-4" th:if="${session.user == null}">
                            <a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId=null'">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-4" th:if="${session.user != null}">
                            <a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId='+${session.user.getUserId()}">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-8">
                            <div class="row" th:if="${session.user != null}">
                                <div class="col-md-12"><h4><a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId='+${session.user.getUserId()}" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row" th:if="${session.user == null}">
                                <div class="col-md-12"><h4><a th:href="'/user/toFictionDetails?fictionId='+${fictions.fictionId}+'&userId=null'" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12"><h6
                                        th:text="${#strings.substring(fictions.fictionDescription, 0, 48)}"></h6></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>
                                        <button class="btn btn-default" th:text="${fictions.wordCount}+万" ></button>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">
                    <div class="row" th:each="fictions , iterStat:${fictionList}"
                         th:if="${iterStat.count} &gt; 3 and ${iterStat.count} &lt;= 6" style="margin-bottom: 10px;">
                        <div class="col-md-4">
                            <a href="#">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12"><h4><a href="#" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12"><h6
                                        th:text="${#strings.substring(fictions.fictionDescription, 0, 48)}"></h6></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>
                                        <button class="btn btn-default" th:text="${fictions.wordCount}+万"></button>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row" th:each="fictions , iterStat:${fictionList}"
                         th:if="${iterStat.count} &gt; 6 and ${iterStat.count} &lt;= 9" style="margin-bottom: 10px;">
                        <div class="col-md-4">
                            <a href="#">
                                <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                            </a>
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12"><h4><a href="#" th:text="${fictions.fictionName}">name</a></h4></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12"><h6
                                        th:text="${#strings.substring(fictions.fictionDescription, 0, 48)}"></h6></div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>
                                        <button class="btn btn-default" th:text="${fictions.wordCount}+万"></button>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="page-header">
                        <h4>书架推荐榜</h4>
                    </div>
                    <hr/>
                </div>
            </div>
            <div class="row" th:each="fictions , iterStat:${rackTopList}"
                 th:if="${iterStat.count} &gt; 0 and ${iterStat.count} &lt;= 10" style="margin-bottom: 10px;">
                <div class="col-md-4">
                    <a href="#">
                        <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                    </a>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-12"><h4><a href="#" th:text="${fictions.fictionName}">name</a></h4></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><h6
                                th:text="${#strings.substring(fictions.fictionDescription, 0, 40)}"></h6></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <h6>
                                <button class="btn btn-default" th:text="${fictions.wordCount}+万"></button>
                            </h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-md-12" style="text-align: center">
            <div th:include="common/footer :: footer"></div>
        </div>
    </div>
</div>

<!--登录模态框-->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">用户登录</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="/user/login" method="post">
                    <div class="form-group row">
                        <label for="exampleCheck1" class="col-sm-2 col-form-label text-right">账号:</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" class="form-control" id="inputName" style="width: 90%;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right">密码:</label>
                        <div class="col-sm-10">
                            <input type="password" name="password" class="form-control" id="inputPassword"
                                   style="width: 90%;">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group form-check text-right">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                <label class="form-check-label" for="exampleCheck1">自动登录</label>
                            </div>
                        </div>
                        <div class="col-md-3"></div>
                        <div class="col-md-3">
                            <label class="form-check-label text-right">忘记密码</label>
                        </div>
                        <div class="col-md-3">
                            <label class="form-check-label text-right">点击注册</label>
                        </div>
                    </div>
                    <div class="row">
                        <button type="submit" class="btn btn-success btn-block" style="width: 90%;margin: auto;">登录
                        </button>
                    </div>
                    <div class="row">
                        <div class="form-group form-check" style="margin: auto;margin-top: 10px;">
                            <input type="checkbox" class="form-check-input">
                            <label class="form-check-label">登录即代表同意 <a>《用户服务协议》</a> 和
                                <a>《隐私政策》</a></label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--注册模态框-->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">用户注册</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="/user/register" method="post">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-right">输入账号:</label>
                        <div class="col-sm-9">
                            <input type="text" name="username" class="form-control" style="width: 90%;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-right">输入密码:</label>
                        <div class="col-sm-9">
                            <input type="password" name="password" class="form-control" style="width: 90%;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-right">确认密码:</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" style="width: 90%;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label text-right">电话号码:</label>
                        <div class="col-sm-9">
                            <input type="password" name="phone" class="form-control" style="width: 90%;">
                        </div>
                    </div>
                    <div class="row">
                        <button type="submit" class="btn btn-success btn-block" style="width: 90%;margin: auto;">确定
                        </button>
                    </div>
                    <div class="row">
                        <div class="form-group form-check" style="margin: auto;margin-top: 10px;">
                            <input type="checkbox" class="form-check-input">
                            <label class="form-check-label">注册即代表同意 <a>《用户服务协议》</a> 和
                                <a>《隐私政策》</a></label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * 搜索框
     */

    function searchFiction() {
        var inputText = $('#inputFictionName').val();
        location.href = '/user/searchFiction?inputText=' + inputText;
    }

    /**
     * 登录模态框
     */
    function loginModelShow() {
        $('#loginModal').modal('show');
    }

    function registerModelShow() {
        $('#registerModal').modal('show');
    }

    function toLoginMsg(){
        toastr.options = {
            "positionClass": "toast-top-center", // 消息框显示的位置
            "timeOut": "1000" // 消息框显示的时间，单位为毫秒
        }
        toastr.warning("请先登录！"); // 显示成功消息
    }
</script>

</body>
</html>